<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Butterfly—表单美化组件demo</title>
    <link rel="shortcut icon" href="http://docs.kissyui.com/kissy-dpl/base/assets/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="../../assets/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../assets/bootstrap-responsive.css"/>
    <link rel="stylesheet" type="text/css" href="../../assets/docs.css"/>
    <script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy.js" charset="utf-8"></script>
    <script src="../../assets/feedback.js" charset="utf-8"></script>
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="http://www.36ria.com/demo/gal/gallery/form/1.3/demo.html" id="logo">KF(kissy-form)</a>

            <div class="nav-collapse">

                <ul class="nav">
                    <li><a href="http://docs.kissyui.com/kissy-gallery/gallery/form/1.3/demo.html">首页</a></li>
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">组件 <b
                            class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="http://www.36ria.com/demo/gal/gallery/form/1.3/demo/form/uploader/index.html">Uploader</a>
                            </li>
                            <li class=""><a
                                    href="http://www.36ria.com/demo/gal/gallery/form/1.3/demo/form/limiter/index.html">Limiter</a>
                            </li>
                            <li><a href="http://www.36ria.com/demo/gal/gallery/form/1.3/demo/form/spinbox/index.html">SpinBox</a>
                            </li>
                            <li>
                                <a href="http://www.36ria.com/demo/gal/gallery/form/1.3/demo/form/auth/index.html">Auth</a>
                            </li>
                            <li class=""><a
                                    href="http://www.36ria.com/demo/gal/gallery/form/1.3/demo/form/checkbox/index.html">checkbox</a>
                            </li>
                            <li class=""><a
                                    href="http://www.36ria.com/demo/gal/gallery/form/1.3/demo/form/radio/index.html">radio</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="https://github.com/kissyteam/kissy-gallery/tree/master/gallery/form">源码</a></li>
                    <li><a href="http://www.36ria.com/demo/gal/gallery/form/1.3/doc/index.html">API文档</a></li>
                </ul>
                <ul class="nav pull-right">
                    <li><a rel="tooltip" target="_blank" href="http://docs.kissyui.com/kissy-gallery/index.html">kissy
                        gallery</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <header class="jumbotron subhead" id="overview">
        <h1>Butterfly</h1>
    </header>
    <section>
        <div class="page-header">
            <h1>使用默认主题表单</h1>
        </div>

        <form id="J_DefaultForm" class="form-horizontal" action="#">
            <fieldset>
                <legend>让表单更美，更简单！</legend>

                <div class="control-group">
                    <label class="control-label" for="username">用户名</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" name="username" placeholder="必填，只能是英文、数字"
                               value="" required data-valid="{required:'用户名为必填！'}"
                               maxlength="10" limiter-target="#J_UsernameLimiter"
                                >
                        <div id="J_UsernameLimiter"></div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="username">性别</label>
                    <div class="controls">
                        <label class="radio inline">
                            <input type="radio" name="sex" value="男"/>男
                        </label>
                        <label class="radio inline">
                            <input type="radio" name="sex" value="女"/>女
                        </label>
                        <label class="radio inline">
                            <input type="radio" name="sex" value="gray" disabled/>gray
                        </label>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label">爱好</label>

                    <div class="controls">
                        <label class="checkbox inline">
                            <input type="checkbox" value="option1" name="interest">
                            爬山
                        </label>
                        <label class="checkbox inline">
                            <input type="checkbox" value="option2" name="interest">
                            游泳
                        </label>
                        <label class="checkbox inline">
                            <input type="checkbox" value="option3" name="interest">
                            旅游
                        </label>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label">自我介绍</label>

                    <div class="controls">
                        <textarea name="introduce" maxlength="140" limiter-target="#J_IntroduceLimiter" rows="3" class="input-xlarge">KF不只是表单组件库</textarea>
                        <!--字数统计器-->
                        <div id="J_IntroduceLimiter"></div>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label">收入</label>

                    <div class="controls">
                        <input type="spinbox" class="input-xlarge" value="5000.00" data-range="500" data-max="50000" data-min="1">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="disabledInput">禁用</label>

                    <div class="controls">
                        <input class="input-xlarge disabled" type="text" disabled="">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="disabledInput">照片</label>

                    <div class="controls">
                        <input type="image-uploader" value="上传照片" name="images" action="imageUpload.php" post-data='{"username":"minghe"}'
                               urls-target-name="imageUrls" >

                        <!--用来存放服务器端返回的图片路径，多个图片以逗号隔开-->
                        <input type="hidden" name="imageUrls">
                    </div>
                </div>
            </fieldset>
        </form>
    </section>
</div>


<script>
    KISSY.config({
        packages:[
            {
                name:'gallery',
                path:'../../../../../../',
                charset:'utf-8'
            }
        ]
    });
    KISSY.use("gallery/form/1.3/butterfly/index", function (S, Butterfly) {
        var butterfly = new Butterfly('#J_DefaultForm');
        butterfly.render();
    });

</script>
</body>
</html>
